<template>
	<div class="equation-top-item-content">
		<div class="equation-top-item-bg" style="opacity: 1; width: 334px;">
				<div class="equation-top-dom-item" :data-code="item.code" data-type="matrix"
					 v-for="(item,index) in jList" data-poupe="true" data-key="" style="height: 45px;">
					<img class="equation-top-dom-item-image" :src="item.url" />

					<div id="grid-selector">
						<div class="grid-container-bottom">
							<el-input-number placeholder="行数" class="input-row" min="1" v-model="row" controls-position="right" />
							<span style="color: #c5c5c5;">x</span>
							<el-input-number placeholder="列数" class="input-row" min="1" v-model="col" controls-position="right" />
							<span class="grid-b-item-confirm" @click="submitRowAndCol(index)">确定</span>
						</div>
					</div>
				</div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 142px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="\cdots" data-type="matrix" data-poupe=""
				 data-key=""
				 style="height: 45px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/jz_4_1.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\vdots" data-type="matrix" data-poupe=""
				 data-key=""
				 style="height: 45px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/jz_4_2.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="\ddots" data-type="matrix" data-poupe=""
				 data-key=""
				 style="height: 45px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/jz_4_3.png"></div>
		</div>
	</div>


</template>
<script setup lang="ts">
import {ref} from 'vue';
const props = defineProps({
	append: {
		type: Function,
		default: () => {}  // 默认空函数，避免报错
	}
});
const emit = defineEmits(['fomule']);
import jz_0_1 from '../../../assets/images/latex/jz_0_1.png';
import jz_0_2 from '../../../assets/images/latex/jz_0_2.png';
import jz_0_3 from '../../../assets/images/latex/jz_0_3.png';
import jz_0_4 from '../../../assets/images/latex/jz_0_4.png';

const jList = [
	{
		code: '\\begin{matrix}\\end{matrix}',
		url: jz_0_1
	},
	{
		code: '\\begin{vmatrix}\\end{vmatrix}',
		url: jz_0_2
	},
	{
		code: '\\begin{pmatrix}\\end{pmatrix}',
		url: jz_0_3
	},
	{
		code: '\\begin{bmatrix}\\end{bmatrix}',
		url: jz_0_4
	}
];
const row = ref(null);
const col = ref(null);
const selectItem = (event: MouseEvent) => {
	// 获取触发事件的元素
	const target = event.currentTarget as HTMLElement;
	// 读取 data-code 属性值
	const code = target.dataset.code;
	emit('fomule', code);
};
const submitRowAndCol = (index) => {
	const rows = parseInt(row.value);
	const cols = parseInt(col.value);

	// 生成矩阵列格式定义（例如：ccccc 表示5列）
	const colFormat = 'c'.repeat(cols);

	// 生成矩阵内容
	let matrixContent = '';

	for (let i = 0; i < rows; i++) {
		// 生成当前行的内容（例如：1 & 1 & 1）
		const rowContent = Array(cols).fill('1').join(' & ');

		// 除了最后一行，其他行后面都添加 \\\\
		if (i < rows - 1) {
			matrixContent += rowContent + ' \\\\' + '\n';
		} else {
			matrixContent += rowContent
		}
	}

	// 构建完整的LaTeX矩阵字符串
	let  str = ``;

	switch (index) {
		case 0:
			str = `\\begin{array}{${colFormat}}
		  ${matrixContent}
		  \\end{array}`;
			break;
		case 1:
			str = `\\left|
			  \\begin{array}{${colFormat}}
			  ${matrixContent}
			  \\end{array}
			  \\right|`;
			break;
		case 2:
			str = `\\left(
			  \\begin{array}{${colFormat}}
			  ${matrixContent}
			  \\end{array}
			  \\right)`;
			break;
		case 3:
			str = `\\left[
			\\begin{array}{${colFormat}}
			  ${matrixContent}
			  \\end{array}
			\\right]`;
			break;
	}

	props.append(str);
	emit('fomule', str);
	row.value = null;
	col.value = null;
}
</script>
<style scoped lang="scss">
#grid-selector {
	display: none;
	top: 45px; left: 0;
	flex-direction: column;
	position: absolute;
	width: 260px;
	z-index: 12;
	padding: 0 8px;
	border-radius: 4px;
	border: 1px solid rgba(33, 41, 48, .06);
	background: #fff;
	box-shadow: 0 12px 32px 0 rgba(0, 0, 0, .08);
	.grid-container-title {
		color: #212930;
		font-size: 13px;
		line-height: 24px;
		text-align: left;
	}
	#grid-container {
		display: grid;
		grid-template-columns: repeat(6, 12px);
		grid-template-rows: repeat(6, 12px);
		gap: 2px;
		border: 1px solid #ccc;
		padding: 5px;
	}
	.grid-container-bottom {
		margin-top: 6px;
		margin-bottom: 6px;
		.input-row{
			width: 90px;
		}
		.grid-b-item-confirm {
			color: #067bef;
			font-size: 13px;
			cursor: pointer;
			margin-left: 4px;
		}
	}
}
.equation-top-dom-item:hover #grid-selector {
	display: flex;
}
.equation-top-dom-item:focus #grid-selector {
	display: flex;
}
</style>
